<template>
<!-- 添加判断，有数据才显示 -->
<view class="goods-detail" v-if="goodsInfo">
    <!-- 轮播图 -->
    <!-- img-mode这是uview封装的图片剪裁模式 -->
    <u-swiper :list="goodsInfo.pics" name="pics_big" height="497" img-mode="aspectFit" bg-color="#fff" @click="handelPreviewImage"></u-swiper>
    <!-- 轮播图 -->

    <!-- 价格 -->
    <view class="goods-price">￥{{goodsInfo.goods_price}}</view>
    <!-- 价格 -->

    <!-- 商品名称 u-line-2超过两行省略号显示 -->
    <view class="goods-name" u-line-2>￥{{goodsInfo.goods_name}}</view>
    <!-- 商品名称 -->

    <!-- 图片详情 -->
    <view class="goods_introduce">
        <view class="goods_introduce-title">图片详情</view>
        <view class="goods_introduce-content">
            <!-- 富文本渲染 -->
             <u-parse :html="goodsInfo.goods_introduce"></u-parse>
        </view>
    </view>
    <!-- 图片详情 -->

    <!-- 提交订单栏 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <navigator class="item car" url="/pages/cart/cart" open-type="switchTab">
          <u-badge
            class="car-num"
            :count="cartCount"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @click="handleGoodsAdd">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
    <!-- 提交订单栏 -->

</view>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
export default {
    data(){
        return{
            goodsInfo:null
        }
    },
    computed:{
    // 计算 购物车中总的购买数据
    ...mapGetters("cart", ["cartCount"]), 
    },
    onLoad({goods_id}){
        // good_id是传参，用户点击哪个就调用该接口
        goods_id=goods_id ||9832
        this.getGoodsDetail(goods_id)
    },
    methods:{
        ...mapMutations("cart", ["cartAdd"]),
        // 获取商品详情
        async getGoodsDetail(goods_id){
            this.goodsInfo=await this.$u.http.get('/goods/detail',{goods_id})
        },
        // 点击轮播图放大预览，传一个index进去就是用户点击那张图片就放大预览哪张图片，默认是从第一张开始显示
        handelPreviewImage(index){
            // 通过map选中需要放大预览的图片
            const urls=this.goodsInfo.pics.map((pic)=>pic.pics_big)
            // 调用微信小程序的api，是一个对象形式，必传值是urls，需要预览的图片列表
             uni.previewImage({ urls, current: urls[index] });
        },
        // 点击购物车
        handleGoodsAdd(){
       // 调用 修改 state中购物车的方法
      this.cartAdd({ value: this.goodsInfo });

      // 提示用户
      uni.showToast({
        title: "商品添加成功",
      });
        },
    }
}
</script>

<style lang='scss'>
.goods-detail{
    // 最外层盒子添加，不然提交订单栏会遮住部分内容
      padding-bottom: 102rpx;
    .goods-price{
        padding: 10rpx;
        color: $theme-color;
    }
    .goods-name{
        padding: 10rpx;
    }
    .goods_introduce-title{
                text-align: center;
                margin: 5px;
    }
    .navigation {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    margin-top: 100rpx;
    border: solid 2rpx #f2f2f2;
    background-color: #ffffff;
    padding: 16rpx 0;
    .left {
      display: flex;
      font-size: 20rpx;
      .item {
        margin: 0 30rpx;
        &.car {
          text-align: center;
          position: relative;
          .car-num {
            position: absolute;
            top: -10rpx;
            right: -10rpx;
          }
        }
      }
    }
    .right {
      display: flex;
      font-size: 28rpx;
      align-items: center;
      .btn {
        line-height: 66rpx;
        padding: 0 30rpx;
        border-radius: 36rpx;
        color: #ffffff;
      }
      .cart {
        background-color: #ed3f14;
        margin-right: 30rpx;
      }
      .buy {
        background-color: #ff7900;
      }
    }
  }
}

</style>